{% extends "base.html" %}
{% block external %}
<script type="text/javascript">		
	$(function () {
		window.app = Appetizor.setup({{ dishes_json|safe }});
	});
</script>




	<script type="text/javascript">
		$(document).ready(function() {
			//When you click on a link with class of popup-link and the href starts with a # 
			$('a.popup-link[href^=#]').click(function() {
				var popID = $(this).attr('rel'); //Get Popup Name
				var popURL = $(this).attr('href'); //Get Popup href to define size

				//Pull Query & Variables from href URL
				var query= popURL.split('?');
				var dim= query[1].split('&');
				var popWidth = dim[0].split('=')[1]; //Gets the first query string value

				//Fade in the Popup and add close button
				$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

				//Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width 	to accomodate for the padding  and border width defined in the css
				var popMargTop = ($('#' + popID).height() + 70) / 2;
				var popMargLeft = ($('#' + popID).width() + 70) / 2;

				//Apply Margin to Popup
				$('#' + popID).css({
					'margin-top' : -popMargTop,
					'margin-left' : -popMargLeft
				});

				//Fade in Background
				$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
				$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
				
				
				return false;
			});
			
			//Instant check if dish name already taken for the Place
			$('#id_name').keyup(function() {
				if ($(this).val().length == 0) {
					$('#name-test-check').fadeOut();
					return;
				}
				
				$('#name-test-check').fadeIn();
				$.get('/p/' + {{ place.id }} + '/add_dish/name_check/', { name: ($.trim($(this).val())).toLowerCase() }, function(data) {
			        if (data == 'valid') {
						$('#name-test-check').text('Ok').css({
							
							'font-size': '13px',
							'float': 'left',
							'border': '1px solid #C6CFC2',
							'padding': '10px 15px 0 15px',
							'height': '30px',
							'display': 'inline-block',
							'background-color': '#F0FEE9',
							
						});
					}
					else if (data == 'invalid') {
						$('#name-test-check').text('Already exists').css({
							
							'font-size': '13px',
							'float': 'left',
							'border': '1px solid #FFAFAF',
							'padding': '10px 15px 0 15px',
							'height': '30px',
							'display': 'inline-block',
							'background-color': '#FFCFCF',
						});
					}
				});
			});

			//Close Popups and Fade Layer
			$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
				$('#fade , .popup-block').fadeOut(function() {
					$('#fade, a.close').remove();  //fade them both out
				});
				return false;
			});
		});
	</script>
	
	
{% endblock %}
{% block title %}{{ place.name }}{% endblock %}
{% block content %}

<div id="slideout-panel">
	<div class="panel-toolbar">
		<span class="panel-close-btn">close <span>x</span></span>
	</div>
	<div id="panel-content">
	</div>
</div>

<div id="left-container" class="clearfix">
<div id="left-inner">
	<div class="place-details clearfix">
		<div class="title">{{ place.name }}</div>
		
		<div class="add-dish-details">Know of a dish that we're missing?<br />			
			<a href="#?w=500" rel="popup-add-dish" class="popup-link"><div class="add-dish-btn">Add a Dish</div></a>
		</div>
		
	</div>
	<!--
	<ul class="filters">
		<a href="/api/dishes/filter/newest"><li id="newest-filter">Newest</li></a>
		<a href="/api/dishes/filter/best"><li id="best-filter">Best</li></a>
		<a href="/api/dishes/filter/popular"><li id="popular-filter">Popular</li></a>
	</ul>
		

	
	<ol id="test-click">	
		<li class="first"></li>
		{% for id, dish in id_dish_coll %}
		<li id={{ id }} class="dish-side-link">
			<span class="ol-number">{{ forloop.counter }}</span>
			<div class="dish-info clearfix">
			<span class="dish-name-text"><a href="/d/{{ dish.slug }}">{{ dish.name }}<br /></a></span>
			<span class="place-name-text"><a href="/p/{{ dish.place.slug }}">{{ dish.place.name }}</a></span>
			<div class="css-page-corner"></div>
			</div>
		</li>
		{% endfor %}
		<li class="last"></li>
	</ol>
	-->

</div>
<ol id="dish-list">
</ol>
</div>

<div id="popup-add-dish" class="popup-block">
	<div class="popup-title">Add a New Dish</div>
	<form action="/p/{{ place.id }}/add_dish/" method="post">
		{% csrf_token %}
		{% for field in add_dish_form %}
			<div class="field-wrapper">
				{{ field.label_tag }} <span class="empty-relative clearfix">{{ field }}
				<div id="{{ field.html_name }}-test-check"></div></span>
			</div>
		{% endfor %}
		<p><input type="submit" value="Add Dish" class="popup-submit-button" /></p>
	</form>

</div>


<div id="right-container" class="clearfix">

	<!--<a href="/register"><div class="join-now">Sign Up</div></a>-->
</div>

</div>
{% endblock %}